<template>
  <div>
    <NavBar></NavBar>
    <div class="content">
      <div class="topstory-container">
        <div class="content-body">
          <div class="content-nav">
            <el-tabs v-model="activeName">
              <el-tab-pane label="最新" name="tuijian">
                <div class="answer-list-container" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="1">
                  <div class="list-body" v-for="(item, index) in answerList" :key="index">
                    <div>
                      <h3 class="answer-header" @click="toAnswerDetail(item.questionId)">{{item.questionName}}</h3>
                        <span>{{item.userName}}:</span>
                        <div class="answer-body" v-html="item.answerMessage"></div>
                        <div class="answer-footer">
                          <span>
                            <el-tag type="success">{{item.modularName}}</el-tag>
                          </span>
                          <span>
                            <el-tag type="primary" >{{item.likeCount}}&nbsp;赞同</el-tag>
                          </span>
                          <span>
                            <el-tag type="info">{{item.commentCount}}评论</el-tag>
                          </span>
                        </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="热门" name="guanzhu">
                <div class="answer-list-container" v-infinite-scroll="loadMore1" infinite-scroll-disabled="busy1" infinite-scroll-distance="1">
                  <div class="list-body" v-for="(item, index) in hotAnswerList" :key="index">
                    <div>
                      <h3 class="answer-header" @click="toAnswerDetail(item.questionId)">{{item.questionName}}</h3>
                        <span>{{item.userName}}:</span><span class="answer-body" v-html="item.answerMessage"></span>
                        <div class="answer-footer">
                          <span>
                            <el-tag type="success">{{item.modularName}}</el-tag>
                          </span>
                          <span>
                            <el-tag type="primary" >{{item.likeCount}}&nbsp;赞同</el-tag>
                          </span>
                          <span>
                            <el-tag type="info">{{item.commentCount}}评论</el-tag>
                          </span>
                        </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="等待回答" name="waitAnswer">
                <div class="question-container" v-infinite-scroll="loadMore2" infinite-scroll-disabled="busy2" infinite-scroll-distance="1">
                  <div class="question-body" v-for="(item, index) in questionList" :key="index">
                    <h3 @click="toAnswerDetail(item.id)">{{item.questionName}}</h3>
                    <p><el-tag type="primary">{{item.modularName}}</el-tag></p>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="content-sidebar">
          <div class="write-nav">
            <div class="btn-nav" @click="handleAnswer">
              <i class="el-icon-tickets"></i><br>
              <span>写回答</span>
            </div>
            <div class="btn-nav" @click="handleQuestionDialog">
              <i class="el-icon-chat-line-square"></i><br>
              <span>提问题</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="添加问题" :visible.sync="questionDialog">
      <div class="question-container">
        <div class="question-header">
          <span>
              <img :src="avatar" alt="">
          </span>
          <span class="user-name">{{userName}}:</span>
        </div>
        <el-form :model="formData" class="question-body">
          <el-form-item>
            <el-input v-model="formData.questionName" type="textarea" :autosize="{ minRows: 2, maxRows: 8}" placeholder="请输入你的问题"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formData.modularId" placeholder="请选择模块">
              <el-option
                v-for="item in modularOptions"
                :key="item.id"
                :label="item.modularName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="questionDialog = false">取 消</el-button>
        <el-button type="primary" @click="addQuestion">确 定</el-button>
      </div>
    </el-dialog>
    <div class="toTop">
      <el-button @click="toTop" icon="el-icon-top" type="primary">回到顶部</el-button>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import axios from 'axios'
export default {
  name: 'MainPage',
  components: {
    NavBar
  },
  data () {
    return {
      hotAnswerList: [],
      questionList: [],
      questionDialog: false,
      activeName: 'tuijian',
      page: 1,
      finalPage: 1,
      page1: 1,
      finalPage1: 1,
      page2: 1,
      finalPage2: 1,
      answerList: [],
      busy: false,
      busy1: false,
      busy2: false,
      formData: {
        userId: '',
        questionName: '',
        modularId: ''
      },
      avatar: '',
      userName: '',
      modularOptions: [
        {
          modularName: '',
          id: ''
        }
      ],
      imgUrl: ''
    }
  },
  watch: {
    $route (to, from) {
      console.log(to)
      this.showAnswerList(1)
    }
  },
  created () {
    this.showAnswerList(1)
    this.showHotAnswerList(1)
    this.showQuestionList(1)
  },
  methods: {
    loadMore2 () {
      if (this.finalPage2 > this.page2) {
        this.busy2 = true
        this.page2++
        console.log(this.page2)
        this.showQuestionList(this.page2)
        setTimeout(() => {
        // 这里请求接口去拿数据，实际应该是调用一个请求数据的方法
          this.busy2 = false
        }, 1000)
      } else {
        this.busy2 = false
      }
    },
    loadMore1 () {
      if (this.finalPage1 > this.page1) {
        this.busy1 = true
        this.page1++
        this.showHotAnswerList(this.page1)
        setTimeout(() => {
        // 这里请求接口去拿数据，实际应该是调用一个请求数据的方法
          this.busy1 = false
        }, 1000)
      } else {
        this.busy1 = false
      }
    },
    loadMore () {
      if (this.finalPage > this.page) {
        this.busy = true
        this.page++
        this.showAnswerList(this.page)
        setTimeout(() => {
        // 这里请求接口去拿数据，实际应该是调用一个请求数据的方法
          this.busy = false
        }, 1000)
      } else {
        this.busy = false
      }
    },
    showHotAnswerList (page) {
      axios.get('/api/answer/hotAnswerList?page=' + page).then(res => {
        const resData = res.data.data.rows
        this.finalPage1 = res.data.data.total
        this.hotAnswerList = page === 1 ? resData : this.hotAnswerList.concat(resData)
      }).catch(err => {
        console.log(err)
      })
    },
    showAnswerList (page) {
      var url = ''
      if (this.$route.query.desc) {
        url = '/api/answer/queryAnswerList?desc=' + this.$route.query.desc + '&page=' + page
      } else {
        url = '/api/answer/queryAnswerList?page=' + page
      }
      axios.get(url).then(res => {
        const resData = res.data.data.pagedResult.rows
        this.finalPage = res.data.data.pagedResult.total
        this.answerList = page === 1 ? resData : this.answerList.concat(resData)
      }).catch(err => {
        console.log(err)
      })
    },
    showQuestionList (page) {
      axios.get('/api/question/questionList?page=' + page).then(res => {
        const resData = res.data.data.rows
        this.finalPage2 = res.data.data.total
        this.questionList = page === 1 ? resData : this.questionList.concat(resData)
      }).catch(err => {
        console.log(err)
      })
    },
    handleAnswer () {
      this.activeName = 'waitAnswer'
    },
    toAnswerDetail (id, creator) {
      this.$router.push('/answer-detail?id=' + id)
    },
    handleQuestionDialog () {
      this.formData.questionName = ''
      this.formData.modularId = ''
      this.questionDialog = true
      this.avatar = 'http://127.0.0.1:9901' + this.$store.state.user.avatar
      this.userName = this.$store.state.user.name
      this.showModular()
    },
    showModular () {
      axios.get('/api/modular/queryModular').then(res => {
        this.modularOptions = res.data.data.rows
      }).catch(err => {
        console.log(err)
      })
    },
    addQuestion () {
      this.formData.userId = localStorage.getItem('userId')
      axios.post('/api/question/addQuestion', this.formData).then(res => {
        this.$notify({
          title: '成功',
          message: '提交成功',
          type: 'success'
        })
        this.questionDialog = false
        this.showQuestionList(1)
      }).catch(err => {
        console.log(err)
        this.$notify({
          title: '失败',
          message: '提交失败',
          type: 'danger'
        })
      })
    },
    toTop () {
      var top = document.body.scrollTop || document.documentElement.scrollTop
      scrollBy(0, -top)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  background: #f6f6f6;
  min-height: 1000px;
  height: auto;
  margin-top: 70px;
  padding: 10px;
  .topstory-container {
    width: 75%;
    margin: 0 auto;
    display: flex;
  }
  .content-body {
    width: 70%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(26,26,26,.1);
    padding: 10px;
    .answer-list-container {
      width: 100%;
      .list-body {
        padding: 10px;
        border-bottom: 1px solid #f0f2f7;
        width: 100%;
        .answer-header {
          cursor: pointer;
        }
        .answer-body {
          width: 80%;
          height: auto;
          line-height: 30px;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          // white-space: nowrap;
        }
        .answer-footer span{
          margin-right: 3%;
        }
      }
    }
    .question-container {
      .question-body {
        padding: 10px;
        border-bottom: 1px solid #f0f2f7;
        width: 100%;
        h3{
          cursor: pointer;
        }
      }
    }
  }
  .content-sidebar {
    margin-left: 1%;
    width: 25%;
    .write-nav {
      background: #fff;
      box-shadow: 0 1px 3px rgba(26,26,26,.1);
      display: flex;
      padding: 10px;
      font-size: 18px;
      color: #000;
      justify-content: space-between;
      align-content: center;
      .btn-nav {
        width: 50%;
        text-align: center;
        cursor: pointer;
        border-right: 2px solid #efefef;
        i {
          font-size:30px;
        }
        span {
          font-size: 16px;
        }
      }
    }
  }

}
.question-container {
  width: 100%;
  padding: 10px;
  .question-header {
    height: 40px;
    line-height: 30px;
    img{
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .user-name {
      vertical-align: top;
    }
  }
  .question-body {
    margin-top: 10px;
  }
}
.toTop {
  position: fixed;
  bottom: 10px;
  right: 20px;
}
</style>
